<!-- 
  组件及其组件化：
    在vue框架中，组件化的开发思想非常重要，其主要的目的就是将问题细分
    为了能够更加直观地看到组件化开发的便捷性，我们在此处做示例

    组件：
      将一个功能封装为一个组件，后续可以直接在其它vue文件中导入并使用
    使用：
      导入后，直接通过标签进行使用，标签的格式可以为双标签也可以为单标签
      若是我们在双标签中传递内容，那就称之为插槽，这已经是后面的内容了
    优点：
      提高代码的复用性，使用简单
-->

<script setup>
  import {ref} from "vue"
  //  如下是使用局部组件的方式/ 组件名的格式为大驼峰，路径一般为相对路径
  import Panel from "./Panel.vue"

</script>

<template>
  <div class="panel-box">
    <h4 class="title">可折叠面板</h4>
    <Panel/>
    <Panel/>
    <Panel/>
  </div>
</template>

<style>
  body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background-color: #ccc;
  }
  .panel-box {
    margin: 280px auto;
    padding: 10px 10px;
    width: 350px;
    border: 2px solid green;
    border-radius: 1em;
    background-color: #fff;
  }
  .title {
    text-align: center;
  }

</style>